﻿
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/echarts/echarts.common.min.js"></script>
    <script src="~/echarts/echarts.min.js"></script>
    <script src="~/js/framework/echartshow.js"></script>
    <script src="~/WebBI/jquery.js"></script>
    <link href="~/WebBI/style2.css" rel="stylesheet" />
    <link href="~/WebBI/newCss.css" rel="stylesheet" />
    <script src="~/js/framework/sysframework.js"></script>
    <script src="~/js/framework/commonjs.js"></script>
    <script src="~/Content/X-admin/lib/layui/layui.js"></script>
      <script src="~/X-admin/lib/layui/layui.js"></script>
    <link href="~/X-admin/css/xadmin.css" rel="stylesheet" />
    <script src="~/X-admin/js/jquery.min.js"></script>
    <title>数据BI</title>
</head>
<body>
    <div class="top">
        <h2>销售数字看板</h2>
    </div>
    <div style="float: left; width: 99%;margin-left:1%;margin-top:1%" name="topBox">
        <div style="float: left; width: 21%; height:450px" name="leftBox">
            <div class="boxPrt" style="float: left; width: 99%; margin-left: 1%; margin-top: 1%; height: 250px;">
                <div id="leftTChart" style="width:98%;height:250px">
                </div>
            </div>
            <div class="boxPrt" style="float: left; width: 99%; margin-left: 1%; margin-top: 2%; height: 400px;">
                <div id="leftMChart" style="width:97%;height:380px;margin-left:2%">
                </div>
            </div>
        </div>
        <div style="float:left;margin-left:1%;width:75%;">
            <div style="width: 100%;">
                <div class="boxPrt" style="height: 180px;width:65%;">
                    <div style="margin:1% 0 0 3%;width:95%;height:150px;">
                        <div style="width: 25%; height: 50px; float: left; margin-top: 1%;" name="mTotal">
                            <div style="width: 99%; height: 40px; float: left;margin-top:1%;margin-left:1%">
                                <div style="width:30%;height:24px;" class="queryType">
                                    <a href="#" id="yearDiv" onclick="QueryData(2)" class="noline">年度</a>
                                </div>
                                <div style="width: 30%; height: 24px;" class="queryType">
                                    <a href="#" id="jdDiv" onclick="QueryData(1)" class="noline">季度</a>
                                </div>
                                <div style="width: 30%; height: 24px;" class="queryType">
                                    <a href="#" id="monthDiv" onclick="QueryData(0)" class="noline">月度</a>
                                </div>
                            </div>
                            <div style="width: 99%; height: 130px; float: left; margin-top: -1%;">
                                <h2 style="font-size: 1rem; color: #fff; text-align: center; ">销售总额(单位：万元)</h2>
                                <h2 style="color: #09E1F9; text-align: center; line-height: 58px; font-size: 1.8rem; margin-top: 3%">
                                    <label id="totalS"></label>
                                </h2>
                            </div>
                        </div>

                        <div class="vline" style="width:1%;height:160px;margin-left:1%">
                        </div>
                        <div id="mtotal" style="width:70%;height:170px;margin-left:3%;float:left;margin-top:1%">
                        </div>
                    </div>

                </div>
                <div class="boxPrt" style="width: 33%; height: 180px; margin-left: 1%;">
                    <div style="margin:2% 0 1% 8%;color:#fff;font-size:13px">
                        库存积压存货
                    </div>
                    <div id="proNum" name="proNum" style="height: 130px;width:90% ;margin-left: 5%; margin-top: 4%;float:left;">

                    </div>
                </div>
            </div>
            <div style="width: 99%; height: 230px; float: left; margin-top:1% ">
                <div class="tableX" style="float: left;  width: 100%; height: 230px;">
                    <div style="width:10%;height:27px;margin-top:1%;margin-left:2%" class="queryType">
                        <a href="#" id="yqxs" onclick="OrderQuery(1)" class="noline">逾期销售订单</a>
                    </div>
                    <div style="width: 13%; height: 27px; margin-left: 1%; margin-top: 1%;" class="queryType">
                        <a href="#" id="jjyqxs" onclick="OrderQuery(0)" class="noline">即将逾期销售订单</a>
                    </div>

                    <table id="sales" name="sales">
                    </table>
                </div>
                <div class="boxPrt" style="width:100%;height:215px;margin-top:1%">
                    <div id="MidMChart" style="width:100%;height:210px;margin-top:5px" >
                    </div>
                </div>

            </div>

        </div>
    </div>




    <div id="holder" style="z-index: -1">
        <script src="~/WebBI/index.js"></script>

    </div>



</body>
</html>
<script type="text/javascript">

    var leftTChart = echarts.init(document.getElementById('leftTChart'), '');
    var leftMChart = echarts.init(document.getElementById('leftMChart'), '');
    var MidMChart = echarts.init(document.getElementById('MidMChart'), '');
    (function () {

        loadData();
        //setInterval('loadPlanDelay()', 1000 * 5);//

    })();
    function loadData() {
        saleData();
    }
    function saleData() {
    $.ajax({
        url: "../Chart/SalesMarkCount",
        dataType: "json",
        data: { dateType: "month", dataCount: "5" },
        type: "POST",
        success: function (rsl) {
            if (rsl.result) {
                    LeftTTotal(rsl.data["sales"]);
                    leftMTotal(rsl.data["customs"]);
                    MidTopTotal(rsl.data["saleProduct"]);
            } else {
                layer.msg(rsl.message);
            }
        }
    });
}
    function LeftTTotal(data) {
        var option = Zhu_hx_01(data, "销售任务排行","万元", "");
        leftTChart.setOption(option);
    }
    function leftMTotal(data){
     var option = Zhu_hx_02(data, "客户销量排行","万元", "");
     leftMChart.setOption(option);
    }
     /**
     * 销售金额合计统计
     **/
    function MidTopTotal(data) {
        $('#mtotal').empty();
        var msg = "";
        var total = 0;
        for (var i = 0; i < data.length; i++) {
            msg += '<div class="mtotalBox">' +
                '<div ><a href="#" class="mtotalNum" onclick="MoneyView(\'' + data[i].proCode+'\')">' + data[i].money +
                '</a></div><div style="margin-top:5%;float:left;font-size:12px">万元</div>' +
                '<div class="mtotalText"> ' + data[i].proName + "</div>" +
                "</div>";
            total += parseFloat(data[i].money);
            if(i==5){
            break;
            }
        }
        $('#mtotal').append(msg);
        $("#totalS").text(total.toFixed(2));
    }
</script>